<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 城市搜索框 -->
        <div class="searchModule">
            <van-icon name="search" />
            <input type="text" placeholder="输入城市名拼音或字母查询" v-model="inputValue">
            <span @click="exit">取消</span>
        </div>
        
        <div v-if="isShow == 'cityList'" >
      
            <!-- 本地城市+最近访问城市 -->
            <NewCityVue  @selectCity="addCity"/>
         
         
            <!-- 热门城市 -->
            <HotCityVue :lily="hotCities"  @selectCity="addCity"/>
            <!-- 所有城市列表 -->
            <AllCityVue @selectCity="addCity"/>
        </div>

        <div v-else-if = "isShow=='searchSuccess'">
            <div class="sortList" v-for="city in sortData" @click="addCity(city)">{{city}}</div>
        </div>

        <div v-else>
            <div>你搜索的城市不存在</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, provide, ref, watch,computed } from 'vue';

// 导入hook
import {getCityData} from './Hooks/getCity'
import {historyCityData} from './Hooks/historyCity'
import {searchCityData} from './Hooks/searchCity'



//CC-- 导入子组件
import NewCityVue from './components/NewCity.vue';
import HotCityVue from './components/HotCity.vue';
import AllCityVue from './components/AllCity.vue';



// 解构出hook里的变量和函数
const {hotCities,allCities} = getCityData()
const {historyCity,addCity,initHistory} = historyCityData()
const {exit,inputValue,isShow,sortData} = searchCityData()

// 将数据传递给子组件AllCity
provide('allCities',computed(() => allCities.value))




onMounted(()=>{
    // 发送请求获取城市信息
    // getCity()

    // 初始化历史记录
    initHistory()

})


</script>

<style scoped>
*{
    box-sizing: border-box;
}
 .container {
    width: 800px;
    height: 1000px;
    /* background-color: pink; */
    margin: 0 auto;
    padding: 10px 50px;
   
 }

 .searchModule {
    position: relative;
    display: flex;
    align-items: center;
}

.van-icon {
    position: absolute;
    left: 5px;
    font-size: 18px;

}
 .container input {
    width: 80%;
    height: 50px;
    padding: 0 30px;
    border: none;
    background-color: #f5f5f5;
    outline: none;
    border-radius: 5px;
 }

 .searchModule span {
    margin-left: 5px;
    font-size: 18px;
    cursor: pointer;
 }

 .sortList {
    width: 100px;
    margin: 15px;
    /* border-bottom: 1px solid; */
    cursor: pointer;
 }
</style>